import React, { memo } from 'react';

import HotRecommend from './children-pages/hot-recommend';
import NewAlbum from './children-pages/new-album';
import RecommendRanking from './children-pages/ranking';
import TopBanner from './children-pages/top-banner';

import { RecommendWrapper, Content, RecommendLeft, RecommendRight } from './style'
const Recommend = memo((props) => {
    return (
        <RecommendWrapper>
            {/* 轮播图开始 */}
           <TopBanner></TopBanner>
             {/* 轮播图结束 */}
             {/* 中间内容区域开始 */}
           <Content className="wrap-v2">
               <RecommendLeft>
                   {/* 热门推荐 */}
                <HotRecommend></HotRecommend>
                {/* 新碟上架 */}
                <NewAlbum></NewAlbum>
                {/* 榜单 */}
                <RecommendRanking></RecommendRanking>
               </RecommendLeft>
               <RecommendRight></RecommendRight>
           </Content>
            {/* 中间内容区域结束 */}
        </RecommendWrapper>
    );
});

export default  Recommend